<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="1000" :duration="1000" circular>
			<swiper-item v-for="item in swiperArr" :key='item.id'>
				<image :src="item.img" mode="" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<view class="Navigation">
			<view class="" @click="goods">
				<view class=" icon">
					<view class="iconfont icon-ziyuan"></view>
				</view>
				<text>顽石超市</text>
			</view>
			<view class="" @click="us">
				<view class="icon">
					<view class="iconfont icon-guanyuwomen"></view>	
				</view>
				<text>联系我们</text>
			</view>
			<view class="" @click="shequ">
				<view class="icon">
					<view class="iconfont icon-tupian"></view>
				</view>
				<text>社区图片</text>
			</view>
			<view class="">
				<view class="icon">
					<view class="iconfont icon-shipin"></view>
				</view>
				<text>学习视频</text>
			</view>
		</view>
		<view class="mytext">
			推&nbsp;&nbsp;&nbsp;荐&nbsp;&nbsp;&nbsp;商&nbsp;&nbsp;&nbsp;品
		</view>
		<my-goods :goodsArr="goodsArr" @nav="goodsItemClick"></my-goods>
	</view>
</template>

<script>
	import MyGoods from '@/components/my-goods/my-goods.vue';
	export default {
		components:{MyGoods},
		data() {
			return {
				swiperArr:[],
				goodsArr:[],
				num:1
			}
		},
		onLoad() {
			this.getgoods()
			this.getswiper()
		},
		methods: {
			// 获取商品详情
			async goodsItemClick(id){
				uni.navigateTo({
					url:`../shangpinxiangqing/shangpinxiangqing?id=${id}`
				})
			},
			// 获取商品
			async getgoods(){
				const data = await uni.$http.get(`/getgoods?pageindex=${this.num}`)
				console.log(data)
				this.goodsArr.push(...data.message)
				// console.log(this.goodsArr)
			},
			// 获取轮播图图片
			async getswiper(){
				const data = await uni.$http.get('/getlunbo')
				// console.log(data)
				this.swiperArr=data.message
			},
			// 跳转到顽石超市
			goods(){
				uni.navigateTo({
					url:'../wanshichaoshi/wanshichaoshi'
				})			
			},
			// 跳转到联系我们
			us(){
				uni.navigateTo({
					url:'../aboutUs/aboutUs'
				})	
			},
			// 跳转到社区图片
			shequ(){
				uni.navigateTo({
					url:'../shequ/shequ'
				})	
			}
		}
	}
</script>

<style>
@import url("/static/icon.css");
page{
	height: 101vh;
}
.swiper-item{
	height: 100%;
	width: 100%;
}
.icon{
	height: 120rpx;
	width: 120rpx;
	background-color: #B50E03;
	color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10rpx;
}
.Navigation{
	margin-top: 10rpx;
	display: flex;
	justify-content: space-around;	
}
.mytext{
	margin-top: 10rpx;
	height: 100rpx;
	width: 100%;
	border: 2px solid #ECECEC;
	text-align: center;
	line-height: 100rpx;
	color: #B50E03;
}

</style>

